<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
// 导入用户共享的数据
import userStore from "../stores/user";
let newUser: any = userStore();

const router = useRouter();
let open = (path: string): void => {
  router.push({ path });
};

// 是否显示密码
let isEye = ref(false);

// 用户信息
let userInfo = reactive({
  name: "",
  pwd: "",
  forgetPwd: "",
});

// 点击用户登录按钮将数据提交给后台
let login = () => {
  // 修改 pinia 中的用户信息，再将用户数据保存到浏览器的 sessionStorage 中
  newUser?.changeUserInfo(userInfo);
  // 保存成功后跳转到个人中心页面
  open("/my");
};

//
let focusName = ref("");
</script>

<template>
  <div class="login">
    <!-- 返回首页 -->
    <div class="home"><span @click="open('/')">&#xe608; 返回首页</span></div>
    <!-- 民营经济投诉服务中型图标 -->
    <img class="bg" src="@/assets/logo.webp" alt="logon" />

    <!-- 表单内容 -->
    <form action="#" id="form">
      <!-- 账号、手机号码 -->
      <label
        class="name"
        for="name"
        :class="focusName == 'name' ? 'focus' : ''"
      >
        <span>&#xe70d;</span>
        <input
          id="name"
          name="name"
          type="text"
          placeholder="账号/手机号码"
          autocomplete="on"
          autofocus
          v-model="userInfo.name"
          @focus="focusName = 'name'"
          @blur="focusName = ''"
        />
      </label>

      <!-- 密码 -->
      <label class="pwd" for="pwd" :class="focusName == 'pwd' ? 'focus' : ''">
        <span>&#xe654;</span>
        <input
          id="pwd"
          name="pwd"
          :type="isEye ? 'text' : 'password'"
          v-model="userInfo.pwd"
          placeholder="密码"
          maxlength="6"
          @focus="focusName = 'pwd'"
          @blur="focusName = ''"
        />
        <span @click="isEye = !isEye" class="eye"
          >{{ isEye ? "&#xe60c;" : "&#xe60d;" }}
        </span>
      </label>

      <!-- 验证码 -->
      <div class="codeLabel">
        <!-- 输入验证码 -->
        <label class="code" for="code">
          <span>&#xe619;</span>
          <input
            id="code"
            name="code"
            type="text"
            placeholder="验证码"
            maxlength="4"
            autocomplete="off"
          />
        </label>

        <!-- 后端发送过来的验证码图片 -->
        <img class="codeImg" src="@/assets/code.png" alt="验证码图片" />
      </div>

      <!-- 记住密码、忘记密码 -->
      <div class="forgetRemPwd">
        <label class="rememberPwd" for="rememberPwd">
          <input type="checkbox" id="rememberPwd" />记住密码
        </label>

        <span class="forgetPwd">忘记密码？</span>
      </div>

      <!-- 登录 -->
      <input id="btn" type="button" value="登录" @click="login" />
      <span class="register" @click="open('/register')"
        >还没有账户？&nbsp;&nbsp;立即注册</span
      >
    </form>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  min-height: inherit;
  @include flexCenterCenter;
  flex-direction: column;

  background: #031c5a url("@/assets/login/login.webp") no-repeat fixed center
    center;
  background-size: cover;
}

// 返回首页
.home {
  width: 1000px;
  position: absolute;
  top: 45px;
  > span {
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
  }
}

.bg {
  width: 391px;
  height: 74px;
  margin-bottom: 30px;
}

#form {
  height: 432px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  gap: 16px 0px;
  background-color: #fff;
}

// 账号、密码输入框
.name,
.pwd {
  width: 400px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  padding-left: 12px;
  color: #babfc9;
  display: flex;
  align-items: center;
  gap: 0px 10px;
  transition: all 0.25s;
}

// 眼睛的状态
.eye {
  height: 100%;
  padding: 0 12px;
  @include flexCenter;
  cursor: pointer;
  user-select: none;
}

// 验证码图片
.codeLabel {
  width: 400px;
  height: 50px;
  @include flexBetweenCenter;
}

// 输入验证码
.code {
  flex: 0 0 260px;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e5e5e5;

  padding-left: 12px;
  color: #babfc9;
  display: flex;
  align-items: center;
  gap: 0px 10px;
}

.codeImg {
  width: 120px;
  height: 50px;
  background: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
}

// 这三个input输入框的样式都一样的了
#name,
#pwd,
#code {
  flex: 1;
  height: 100%;
  color: #333;
  box-shadow: 0 0 0 60px #fff inset;
}

// 记住、忘记密码--
.forgetRemPwd {
  width: 400px;
  @include flexBetweenCenter;
  user-select: none;
}

// 记住密码
.rememberPwd {
  height: 19px;
  line-height: 19px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
}

// 多选框样式
input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin-right: 6px;
  // -webkit-appearance: none !important;
  vertical-align: middle !important;
  background-color: #ffffff;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid #e5e5e5 !important;
  outline: none;
  overflow: hidden;
}

// 忘记密码
.forgetPwd {
  cursor: pointer;
  color: #2163e0;
}
// 记住、忘记密码==

// 登录按钮
#btn {
  width: 400px;
  height: 50px;
  margin: 8px 0px;
  // background-color: #2163e0;
  background-color: #2486ff;
  transition: all 0.25s;
  &:hover {
    background-color: #0160d5;
  }
  border-radius: 4px;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 6px;
  cursor: pointer;
}

// 没有账户、立即注册
.register {
  font-size: 14px;
  color: #2163e0;
  text-align: center;
  cursor: pointer;
}

.focus {
  border-color: #1b9aee !important;
}
</style>
